﻿@{
ViewData["Title"] = "收支管理";
}
<div class="layui-row layui-margin-1">
	<div class="layui-panel layui-col-md4 layui-padding-4 layui-col-md-offset2">
		<strong>采购单据</strong>
		<p style="text-align: center;">
			采购总金额：<strong id="totalMoney">0</strong>；
			已支付：<span style="color: gray;" id="money">0</span>；
			未支付：<span class="layui-font-orange" id="residueMoney">0</span>
		</p>
		<div style="width: 100%;height: 10px;margin-top: 10px;">
			<div style="width: 50%;height: 100%; float: left;" class="layui-bg-green" id="j1"></div>
			<div style="width: 50%;height: 100%; float: right;" class="layui-bg-orange" id="j2"></div>
		</div>
	</div>
	<div class="layui-panel layui-col-md4 layui-padding-4">
		<strong>销售单据</strong>
		<p style="text-align: center;">
			销售总金额：<strong id="totalMoney1">0</strong>；
			已收款：<span style="color: gray;" id="money1">0</span>；
			未收款：<span class=layui-font-orange" id="residueMoney1">0</span>
		</p>
		<div style="width: 100%;height: 10px;margin-top: 10px;">
			<div style="width: 50%;height: 100%; float: left;" class="layui-bg-green" id="j3"></div>
			<div style="width: 50%;height: 100%; float: right;" class="layui-bg-orange" id="j4"></div>
		</div>
	</div>
</div>
<div class="layui-row">
	<div class="layui-col-md4 layui-col-md-offset2">
		<fieldset class="layui-elem-field" style="background-color: #fff;">
			<legend>采购付款</legend>
			<div class="layui-field-box">
				<div class="layui-form">
					<div class="layui-form-item">
						<div class="layui-input-group">
							<div class="layui-input-prefix">供&nbsp;&nbsp;应&nbsp;商</div>
							<!-- <input type="text" class="layui-input"/> -->
							<select id="selectSupplierName" onchange="btnChange()">
								<option value="">暂无未付款的供应商</option>
							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-group">
							<div class="layui-input-prefix">付款金额</div>
							<input type="number" class="layui-input" style="width: 212px;" pattern="^\d+(\.\d{1,2})?$"
								oninput="validateInput(this)" id="inputMoney" />
						</div>
					</div>
					<div class="layui-form-item">
						<button type="button" class="layui-btn layui-btn-disabled layui-btn-primary layui-bg-green"
							lay-on="confirm" id="btn1" disabled>确认付款</button>
					</div>
				</div>
			</div>
		</fieldset>
	</div>
	<div class="layui-col-md4">
		<fieldset class="layui-elem-field" style="background-color: #fff;">
			<legend>销售收款</legend>
			<div class="layui-field-box">
				<div class="layui-form">
					<div class="layui-form-item">
						<div class="layui-input-group">
							<div class="layui-input-prefix">客&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;户</div>
							<select id="selectClientName" onchange="">
								<option value="">暂无未收款的客户</option>
							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-group">
							<div class="layui-input-prefix">收款金额</div>
							<input type="number" class="layui-input" style="width: 212px;" pattern="^\d+(\.\d{1,2})?$"
								oninput="validateInput1(this)" id="inputMoney1" />
						</div>
					</div>
					<div class="layui-form-item">
						<button type="button" class="layui-btn layui-btn-disabled layui-btn-primary layui-bg-green"
							lay-on="confirm1" id="btn2" disabled>确认收款</button>
					</div>
				</div>
			</div>
		</fieldset>
	</div>
</div>
<div class="layui-row">
	<div class="layui-col-md4 layui-col-md-offset2">
		<p>待支付金额:</p>
		<table class="layui-table">
			<colgroup>
				<col width="240">
				<col>
			</colgroup>
			<thead>
				<tr>
					<th>供应商</th>
					<th>未付款金额</th>
				</tr>
			</thead>
			<tbody id="tb">
				<tr>
					<td>加载中...</td>
					<td>加载中...</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="layui-col-md4">
		<p>未收款金额:</p>
		<table class="layui-table">
			<colgroup>
				<col width="240">
				<col>
			</colgroup>
			<thead>
				<tr>
					<th>客户</th>
					<th>未收款金额</th>
				</tr>
			</thead>
			<tbody id="tb2">
				<tr>
					<td>加载中...</td>
					<td>加载中...</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
<div class="layui-row">
	<div class="layui-col-md4 layui-col-md-offset2">
		<p>最近付款记录：</p>
		<table class="layui-table">
			<colgroup>
				<col width="20">
				<col width="240">
				<col>
				<col>
			</colgroup>
			<thead>
				<tr>
					<th></th>
					<th>供应商</th>
					<th>付款金额</th>
					<th>付款时间</th>
				</tr>
			</thead>
			<tbody id="tb1">
				<tr>
					<td>1</td>
					<td>加载中...</td>
					<td>加载中...</td>
					<td>加载中...</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="layui-col-md4">
		<p>最近收款记录：</p>
		<table class="layui-table">
			<colgroup>
				<col width="20">
				<col width="240">
				<col>
				<col>
			</colgroup>
			<thead>
				<tr>
					<th></th>
					<th>客户</th>
					<th>收款金额</th>
					<th>收款时间</th>
				</tr>
			</thead>
			<tbody id="tb4">
				<tr>
					<td>1</td>
					<td>加载中...</td>
					<td>加载中...</td>
					<td>加载中...</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>


@section Scripts {
<script type="text/javascript">
	//设置请求头
	// const token = localStorage.getItem('token');
	// const requestOptions = {
	// 	method: 'GET',
	// 	headers: {
	// 		'Authorization': `Bearer ${token}`,
	// 		'Content-Type': 'application/json'
	// 	}
	// };

	//采购单据总金额、未支付、已支付金额
	fetch('/api/Payment/GetCount')
		.then(response => {
			if (!response.ok) {
				throw new Error('网络响应不正常');
			}
			return response.json();
		})
		.then(data => {
			const c1 = document.getElementById("totalMoney");
			const c2 = document.getElementById("money");
			const c3 = document.getElementById("residueMoney")
			c1.textContent = data.totalMoney;
			c2.textContent = data.money;
			c3.textContent = data.residueMoney;
			const paidPercent = Math.round((c2.textContent / c1.textContent) * 100);
			const unpaidPercent = Math.round((c3.textContent / c1.textContent) * 100);
			document.getElementById("j1").style.width = paidPercent + '%';
			document.getElementById("j2").style.width = unpaidPercent + '%';
		})
		.catch(error => {
			console.log("错误，返回：" + error);
		});
	//销售单据总金额、未收款、以收款金额
	fetch('/api/Proceeds/GetCount')
		.then(response => {
			if (!response.ok) {
				throw new Error('网络响应不正常');
			}
			return response.json();
		})
		.then(data => {
			const x1 = document.getElementById("totalMoney1");
			const x2 = document.getElementById("money1");
			const x3 = document.getElementById("residueMoney1")
			x1.textContent = data.totalMoney;
			x2.textContent = data.money;
			x3.textContent = data.residueMoney;
			const paidPercent = Math.round((x2.textContent / x1.textContent) * 100);
			const unpaidPercent = Math.round((x3.textContent / x1.textContent) * 100);
			document.getElementById("j3").style.width = paidPercent + '%';
			document.getElementById("j4").style.width = unpaidPercent + '%';
		})
		.catch(error => {
			console.log("错误，返回：" + error);
		});

	//获取供应商、未付款金额
	fetch('/api/Payment/GetUserUnpaid')
		.then(response => {
			if (!response.ok) {
				throw new Error('网络响应不正常');
			}
			return response.json();
		})
		.then(data => {
			const tb = document.getElementById('tb');
			const selectSupplierName = document.getElementById('selectSupplierName');
			let str = '';
			let str1 = '';
			data.forEach(item => {
				str += `
						<tr>
							<td>${item.name}</td>
							<td>${item.money}</td>
						</tr>`;
				str1 += `
				<option value="${item.name}">${item.name}</option>'`;
			});
			tb.innerHTML = str;
			selectSupplierName.innerHTML = str1;
			//渲染select表单
			layui.use(function() {
				let form = layui.form;
				form.render('select');
			});
		})
		.catch(error => {
			console.log("错误，返回：" + error);
		});

	//获取未收款客户、金额
	fetch('/api/Proceeds/GetUserNotProceeds')
		.then(response => {
			if (!response.ok) {
				throw new Error('网络响应不正常');
			}
			return response.json();
		})
		.then(data => {
			const tb2 = document.getElementById('tb2');
			const selectClientName = document.getElementById('selectClientName');
			let str2 = '';
			let str3 = '';
			data.forEach(item => {
				str2 += `
						<tr>
							<td>${item.name}</td>
							<td>${item.money}</td>
						</tr>`;
				str3 += `
				<option value="${item.name}">${item.name}</option>'`;
			});
			tb2.innerHTML = str2;
			selectClientName.innerHTML = str3;
			//渲染select表单
			layui.use(function() {
				let form = layui.form;
				form.render('select');
			});
		})
		.catch(error => {
			console.log("错误，返回：" + error);
		});
	//对金额输入框进行动态验证
	function validateInput(input) {
		const value = input.value;
		// 正则表达式：匹配数字和最多两位小数
		const regex = /^\d*(\.\d{0,2})?$/;
		if (!regex.test(value)) {
			// 如果输入不符合要求，截取有效部分
			input.value = value.slice(0, -1);
		}
		//调用btnChange方法，判断付款按钮状态
		btnChange()
	}

	//判断确认付款按钮状态
	let btn1 = document.getElementById('btn1');
	let selectSupplierName = document.getElementById('selectSupplierName');
	let inputMoney = document.getElementById('inputMoney');

	function btnChange() {
		if (selectSupplierName.value != "" && inputMoney.value != "") {
			btn1.classList.remove('layui-btn-disabled');
			btn1.disabled = false;
		} else {
			btn1.classList.add('layui-btn-disabled');
			btn1.disabled = true;
		}
	}

	function validateInput1(input) {
		const value = input.value;
		// 正则表达式：匹配数字和最多两位小数
		const regex = /^\d*(\.\d{0,2})?$/;
		if (!regex.test(value)) {
			// 如果输入不符合要求，截取有效部分
			input.value = value.slice(0, -1);
		}
		//调用btnChange方法，判断付款按钮状态
		btnChange1()
	}

	//判断确认付款按钮状态
	let btn2 = document.getElementById('btn2');
	let selectClientName = document.getElementById('selectClientName');
	let inputMoney1 = document.getElementById('inputMoney1');

	function btnChange1() {
		if (selectClientName.value != "" && inputMoney1.value != "") {
			btn2.classList.remove('layui-btn-disabled');
			btn2.disabled = false;
		} else {
			btn2.classList.add('layui-btn-disabled');
			btn2.disabled = true;
		}
	}

	//弹出确认付款
	layui.use(function() {
		let layer = layui.layer;
		let util = layui.util;
		const selectSupplierName = document.getElementById('selectSupplierName');
		const inputMoney = document.getElementById('inputMoney');
		const selectClientName = document.getElementById('selectClientName');
		const inputMoney1 = document.getElementById('inputMoney1');
		util.on('lay-on', {
			confirm: function() {
				layer.confirm(`确认给“${selectSupplierName.value}"付款“${inputMoney.value}"元吗？`, {
					title: '确认付款',
					btn: ['确定', '关闭']
				}, function() {
					//点确定回调函数
					fetch('/api/Payment/Add', {
							method: 'POST',
							headers: {
								'Content-Type': 'application/json'
							},
							body: JSON.stringify({
								"id": 0,
								"name": `${selectSupplierName.value}`,
								"paymentMoney": inputMoney.value,
								"createDateTime": new Date()
							})
						}).then(response => {
							layer.msg('成功');
							setTimeout(() => {
								location.replace(location.pathname);
							}, 1200);
						})
						.catch(error => {
							layer.msg('失败了');
						});
				}, function() {
					//点关闭回调函数
					layer.msg('取消付款成功');
				});
			},
			confirm1: function() {
				layer.confirm(`确认客户：“${selectClientName.value}"收款：“${inputMoney1.value}"元吗？`, {
					title: '确认收款',
					btn: ['确定', '关闭']
				}, function() {
					//点确定回调函数
					fetch('/api/Proceeds/Add', {
							method: 'POST',
							headers: {
								'Content-Type': 'application/json'
							},
							body: JSON.stringify({
								"id": 0,
								"name": `${selectClientName.value}`,
								"paymentMoney": inputMoney1.value,
								"createDateTime": new Date()
							})
						}).then(response => {
							layer.msg('成功');
							setTimeout(() => {
								location.replace(location.pathname);
							}, 1200);
						})
						.catch(error => {
							layer.msg('失败了');
						});
				}, function() {
					//点关闭回调函数
					layer.msg('取消付款成功');
				});
			}
		});
	});

	//获取最近十条付款记录
	fetch('/api/Payment/QueryTen')
		.then(response => {
			if (!response.ok) {
				throw new Error('网络响应不正常');
			}
			return response.json();
		})
		.then(data => {
			const tb = document.getElementById('tb1');
			let str = '';
			let num = 1;
			data.forEach(item => {
				str += `
						<tr>
							<td>${num++}</td>
							<td>${item.name}</td>
							<td>${item.paymentMoney}</td>
							<td>${item.createDateTime}</td>
						</tr>`;
			});
			tb.innerHTML = str;
		})
		.catch(error => {
			console.log("错误，返回：" + error);
		});

	fetch('/api/Proceeds/QueryTen')
		.then(response => {
			if (!response.ok) {
				throw new Error('网络响应不正常');
			}
			return response.json();
		})
		.then(data => {
			const tb = document.getElementById('tb4');
			let str = '';
			let num = 1;
			data.forEach(item => {
				str += `
						<tr>
							<td>${num++}</td>
							<td>${item.name}</td>
							<td>${item.paymentMoney}</td>
							<td>${item.createDateTime}</td>
						</tr>`;
			});
			tb.innerHTML = str;
		})
		.catch(error => {
			console.log("错误，返回：" + error);
		});
</script>
}